<template>
<div>
  <div class="opt-area-02">
    <div class="left-con" style="margin-bottom: 5px">
      停留车辆:{{params.totalRecord}}
    </div>
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Input type="text" placeholder="车牌号" style="width: 164px" v-model="params.BRANUM"/>
      </div>
      <div v-show="String(severUserInfo.company_grade) != '4' && String(severUserInfo.level) != '20' && String(severUserInfo.company_grade) != '8'" class="input-frame" style="width: 164px">
        <Select v-model="params.area_code" style="width:164px" placeholder="行政区" >
          <Option v-for="item in areaList" :value="item.value" :key="item.value">{{ item.lable }}</Option>
        </Select>
      </div>
      <Button type="primary" @click="findTableList">查询</Button>
    </div>
  </div>
  <template>
    <Table border :columns="tableColumns" :data="tableData">
      <template slot-scope="{ row, index }" slot="BRACOLOR">
        <span v-for="(item,index) in projectListArr" :key="index">
          <p v-show="item.value === row.BRACOLOR"> {{item.lable}}</p>
        </span>
      </template>
      <template slot-scope="{ row, index }" slot="area_code">
        <span v-for="(item,index) in areaList" :key="index">
          <p v-show="item.value === row.area_code"> {{item.lable}}</p>
        </span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button v-show="row.register_code" type="primary" size="small" style="margin-right: 5px" @click="getCargoTransportationAll(row)">详情</Button>
        <Button type="success" size="small" style="margin-right: 5px" @click="getCarWz(row)">查看停留位置</Button>
        <Button v-show="!row.carczMsg" type="warning" size="small" style="margin-right: 5px" @click="tlCarcz(row)">处置</Button>
        <Button v-show="row.carczMsg" type="warning" size="small" style="margin-right: 5px" @click="tlCarczT(row)">查看处置</Button>
      </template>
    </Table>
  </template>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
          @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <record-detail ref="recordDetail"></record-detail>
  <a-map-d ref="aMapD"></a-map-d>
  <Modal
    v-model="chuzhiShow"
    title="处置"
    @on-ok="chuzhiOk"
    @on-cancel="chuzhiShow = false">
    <Form :model="CarInfo" :label-width="80">
      <FormItem label="处置类型：">
        <Select v-model="CarInfo.type">
          <Option value="1">社区处置</Option>
          <Option value="2">服务驿站处置</Option>
          <Option value="3">宾馆处置</Option>
          <Option value="4">其他</Option>
        </Select>
      </FormItem>
      <FormItem label="处置内容：">
        <Input type="textarea" v-model="CarInfo.carczMsg" placeholder="请出入处置内容"></Input>
      </FormItem>
    </Form>
  </Modal>
  <Modal
    v-model="chuzhiShowT"
    title="处置">
    <Form :model="CarInfo" :label-width="80">
      <FormItem label="处置类型：">
        <Select v-model="CarInfo.type" disabled>
          <Option value="1">社区处置</Option>
          <Option value="2">服务驿站处置</Option>
          <Option value="3">宾馆处置</Option>
          <Option value="4">其他</Option>
        </Select>
      </FormItem>
      <FormItem label="处置内容：">
        <Input type="textarea" v-model="CarInfo.carczMsg" placeholder="请出入处置内容" disabled></Input>
      </FormItem>
    </Form>
  </Modal>
</div>
</template>

<script>
import RecordDetail from '../record_detail'
import { findTlList, getCargoTransportationAll, insertTlCz } from '../../api/eventlist'
import AMapD from '../a-map-d'

export default {
  name: 'index',
  components: {
    AMapD,
    RecordDetail // 详情
  },
  data () {
    return {
      severUserInfo: {},
      chuzhiShowT: false,
      chuzhiShow: false,
      CarInfo: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0,
        BRANUM: ''
      },
      areaList: [
        {
          value: '210702',
          lable: '古塔区',
          code: 'LM00001'
        },
        {
          value: '210703',
          lable: '凌河区',
          code: 'LM00002'
        },
        {
          value: '210711',
          lable: '太和区',
          code: 'LM00003'
        },
        {
          value: '210712',
          lable: '高新区',
          code: 'LM00004'
        },
        {
          value: '210713',
          lable: '开发区',
          code: 'LM00005'
        },
        {
          value: '210726',
          lable: '黑山县',
          code: 'LM00006'
        },
        {
          value: '210727',
          lable: '义县',
          code: 'LM00007'
        },
        {
          value: '210781',
          lable: '凌海市',
          code: 'LM00008'
        },
        {
          value: '210782',
          lable: '北镇市',
          code: 'LM00009'
        }
      ],
      projectListArr: [
        {
          value: '1',
          lable: '蓝色'
        },
        {
          value: '2',
          lable: '黄色'
        },
        {
          value: '3',
          lable: '黑色'
        },
        {
          value: '4',
          lable: '白色'
        },
        {
          value: '5',
          lable: '绿色'
        },
        {
          value: '9',
          lable: '其他'
        }
      ],
      tableColumns: [
        {
          title: '车牌号',
          align: 'center',
          key: 'BRANUM'
        },
        {
          title: '车牌颜色',
          align: 'center',
          slot: 'BRACOLOR'
        },
        {
          title: '停止时间',
          align: 'center',
          key: 'change_time'
        },
        {
          title: '行政区',
          align: 'center',
          slot: 'area_code'
        },
        {
          title: '停留时长（小时）',
          align: 'center',
          key: 't_time'
        },
        {
          title: '操作',
          slot: 'action',
          width: 250,
          align: 'center'
        }
      ],
      tableData: []
    }
  },
  methods: {
    pageAction (page) {
      this.params.pageNo = page
      this.findTableList()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.findTableList()
    },
    findTableList () {
      let data = this.params
      if (this.severUserInfo.level === '20') {
        let company_code = this.severUserInfo.company_code
        this.areaList.forEach(item => {
          if (company_code === item.code) {
            data.area_code = item.value
          }
        })
      }
      if (this.severUserInfo.level === '30' || this.severUserInfo.level === '35') {
        let company_code = this.severUserInfo.parent_code
        this.areaList.forEach(item => {
          if (company_code === item.code) {
            data.area_code = item.value
          }
        })
      }
      if (this.severUserInfo.level === '40' || this.severUserInfo.level === '45') {
        let company_code = this.severUserInfo.p_parent_code
        this.areaList.forEach(item => {
          if (company_code === item.code) {
            data.area_code = item.value
          }
        })
      }
      findTlList(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = data.data.results
          this.params.totalRecord = data.data.totalRecord
        } else {
          this.error(data)
        }
      })
    },
    getCargoTransportationAll (e) {
      let data = {
        register_code: e.register_code
      }
      getCargoTransportationAll(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          let result = data.data.results
          if (result.length > 0) {
            this.$refs.recordDetail.init(result[0])
          }
        } else {
          this.error(data)
        }
      })
    },
    init () {
      this.findTableList()
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getCarWz (e) {
      this.$refs.aMapD.init(e)
    },
    tlCarcz (e) {
      this.CarInfo = e
      this.chuzhiShow = true
    },
    tlCarczT (e) {
      this.CarInfo = e
      this.chuzhiShowT = true
    },
    chuzhiOk () {
      let data = this.CarInfo
      insertTlCz(data).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.findTableList()
        } else {
          this.error(data)
        }
      })
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
    this.init()
  }
}
</script>
<style scoped>
.page_style{
  margin-top: 10px;
}
.detail_card {
  margin-bottom: 2%;
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
.actionBtn {
  margin-top: 5px;
  margin-left: 5px;
}
</style>
